<template>
  <div class="content">
    <div class="page-content">
      <Navigation v-if="tabType===1"
                  :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:2,value:'就业困难人员',url:'/difficult-job/difficult-job'},{id:3,value:tabName,url:''}]"></Navigation>
      <Navigation v-if="tabType===2"
                  :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:3,value:tabName,url:''}]"></Navigation>
      <div class="block">
        <div class="list-block">
          <div class="block-title">
            <div :class="tabActive===1?'active':''" @click="tabActive=1" class="title">政策新闻</div>
            <div :class="tabActive===2?'active':''" @click="tabActive=2" class="title" v-if="tabName!=='三支一扶'">推荐职位</div>
          </div>
            <div class="list-content" v-loading="articleLoading" v-if="tabActive===1">
              <template v-if="articleList.length>0">
              <ArticleItem v-for="(item,index) in articleList" :key="item.id" :data="item"></ArticleItem>
              </template>
              <el-empty v-else ></el-empty>
              <div v-if="articleList.length>0&&newCount>newLimit" style="display: flex; justify-content: flex-end">
                <el-pagination
                    background
                    :page-size="newLimit"
                    layout="prev, pager, next"
                    :total="newCount"
                    @size-change="newsHandleSizeChange"
                    @current-change="newsHandleCurrentChange"
                >
                </el-pagination>
              </div>
            </div>
          <div class="block-col" v-if="tabActive===2">
            <template class="block-col" style="display: flex;" v-if="positionList.length>0">
              <div class="block-col position" v-loading="positionLoading">
                <PositionItem class="position-item" :key="item.id" :data="item" v-for="(item) in positionList"></PositionItem>
              </div>
            </template>
            <el-empty v-else></el-empty>
            <div v-if="positionList.length>0&&count>limit" style="display: flex; justify-content: flex-end">
              <el-pagination
                  background
                  :page-size="limit"
                  layout="prev, pager, next"
                  :total="count"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import PositionItem from "@/components/PositionItem/PositionItem";
import ArticleItem from "@/components/ArticleItem/AticleItem";
import {getNewsList} from "@/api/notice";
import {getPublish} from "@/api/position";

export default {
  name: "difficultJobDetail",
  data() {
    return {
      tabName: '',
      tabType: 1,
      type: 0,

      articleLoading:false,
      articleList: [],
      tabActive:1,
      positionLoading:false,
      positionList: [],
      id: null,
      name: '',
      newPage: 1,
      newLimit: 15,
      newCount: 0,
      page: 1,
      limit: 9,
      count: 0
    }
  },
  components: {ArticleItem, PositionItem, Navigation},
  methods: {
    getNoticeList(){
      this.articleLoading=true
      getNewsList({type:this.type,page: this.newPage,limit:this.newLimit}).then((res)=>{
        this.articleList=res.list
        this.newCount = res.count
      }).finally(()=>{
        this.articleLoading=false
      })
    },
    getPublish(){
      if(this.articleList&&this.articleList.length>0)
      {
        this.positionLoading=true
        getPublish({keyword: this.tabName,page: this.page,limit: this.limit}).then((res)=>{
          this.positionList=res.list
          this.count = res.count
        }).finally(()=>{
          this.positionLoading=false
        })
      }
    },

    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getPublish()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getPublish()
    },
    // 每页显示数量change
    newsHandleSizeChange(e) {
      this.newLimit = e
      this.getNoticeList()
    },
    // 当前页change
    newsHandleCurrentChange(e) {
      this.newPage = e
      this.getNoticeList()
    },
  },
  watch: {//监听
    tabActive: {
      handler(e) {
        if (e===2){
        }
      },
      immediate: true,//深度监听
    }
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getNoticeList()
    this.getPublish()
  }
}
</script>

<style scoped lang="scss">
.content {
  .page-content {
    width: $contentWidth;
    min-height: $fullMinHeight;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .block {
      display: flex;
      flex-direction: row;

      .block-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        margin-bottom: 20px;
        background: #fff;
        height: 70px;

        .title {
          font-size: 22px;
          border-bottom: 3px solid rgba(0, 0, 0, 0);
          margin: 0 20px;
          padding-bottom: 10px;
          cursor: pointer;
          font-weight: bold;
        }

        .title.active {
          border-bottom: 3px solid $red;
          color: $red;
        }
      }

      .list-block {
        width: 100%;
        display: flex;
        flex-direction: column;

        .list-content {
          padding: 20px 30px;
          background: #fff;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
        }
        .block-col{
          width: 100%;
          .block-col.position {
            display: flex;
            flex-direction: row;
            width: 100%;
            flex-wrap: wrap;
            //justify-content: space-between;
            .position-item {
              width: calc((100% - 30px) / 3);
              margin-right: 15px;
              margin-bottom: 15px;
            }

            .position-item:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
